<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'basicdata.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item><a routerLink="/pages/process/mom">{{ 'process.breadcrumb.mom' | translate
          }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'process.breadcrumb.addmom' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <form dForm [layout]="layoutDirection" (dSubmit)="submit($event)" [labelSize]="'sm'" [labelAlign]="'end'">
      <div class="departments">
        <div class="card">
          <div class="card-title">
            <span>MOM生产方法</span>
          </div>
          <div class="card-body">
            <d-operable-tree #operableTree1 [tree]="treeData" [treeNodeTitleKey]="'title'" [iconLeaf]="iconLeaf">
              <ng-template #iconTemplate let-node="node">
                <span [ngClass]="{ 'my-icon ': node?.originItem.icon.icon }"
                  class="{{  node?.originItem.icon.icon }}"><i class=""></i></span>
              </ng-template>
              <ng-template #operatorTemplate let-optree let-node="node" let-deleteNode="deleteNode">
                <span *ngIf="!node.data.disableDelete" class="op-icons icon icon-close"
                  (click)="deleteNode($event, node)"></span>
              </ng-template>
            </d-operable-tree>
          </div>
        </div>
      </div>
      <div class="employs-box">
        <div class="card card1">
          <div class="card-title">
            <p class="form-title">基本信息</p>
            <div class="button">
              <d-button bsStyle="common" (btnClick)="cancle()">取消</d-button>
              <d-button dFormSubmit>保存</d-button>
            </div>
          </div>
          <div class="selectMaterial">
            <div class="form-body">
              <div class="grid mt-3">
                  <div class="u-1-3 ">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>物料编码</span>
                      </d-form-label>
                      <d-form-control>
                        <input dTextInput class="form-input-box" readonly name="code" (click)="SelectMaterial()"
                          [(ngModel)]="MomData.partNum" [dValidateRules]="momFormRules.partNum">
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-3 ">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>物料名称</span>
                      </d-form-label>
                      <d-form-control>
                        <input dTextInput class="form-input-box" name="name" readonly (click)="SelectMaterial()"
                          [(ngModel)]="this.MomData.partName" [dValidateRules]="momFormRules.partName">
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>是否核准</span>
                      </d-form-label>
                      <div class="isApproved">
                        <d-toggle [(ngModel)]="this.MomData.isApproval" name="isApproval"></d-toggle>
                      </div>
                    </d-form-item>
                  </div>
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>版本</span>
                      </d-form-label>
                      <d-form-control>
                        <input dTextInput class="form-input-box" name="banben" [(ngModel)]="MomData.version"
                          (change)="versionChange()" [dValidateRules]="momFormRules.version">
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-3 me-20">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>有效期</span>
                      </d-form-label>
                      <d-form-control>
                        <d-range-datepicker-pro [(ngModel)]="value1" name="duration" (ngModelChange)="onChange($event)" [dValidateRules]="momFormRules.endDate"></d-range-datepicker-pro>
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>工艺路线编码</span>
                      </d-form-label>
                      <d-form-control>
                        <input dTextInput class="form-input-box" name="technologyRouteNum" readonly
                          (click)="SelectTechnologyRoute()" [(ngModel)]="MomData.technologyRouteNum"
                          [dValidateRules]="momFormRules.technologyRouteNum">
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label>
                        <span class="label"><span class="Required">*</span>工艺路线名称</span>
                      </d-form-label>
                      <d-form-control>
                        <input dTextInput class="form-input-box" name="technologyRouteName" readonly
                          (click)="SelectTechnologyRoute()" [(ngModel)]="this.MomData.technologyRouteName"
                          [dValidateRules]="momFormRules.technologyRouteName">
                      </d-form-control>
                    </d-form-item>
                  </div>
                  <div class="u-1-3">
                    <d-form-item>
                      <d-form-label>
                        <span class="label">MOM附件</span>
                      </d-form-label>
                      <div class="isApproved">
                        <d-button bsStyle="common" (btnClick)="onButtonClick()">附件</d-button>
                      </div>
                    </d-form-item>
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card card-procss">
          <div class="card-title">
            <p class="form-title">工序BOM</p>
          </div>
          <div class="setProcess">
            <div class="view">
              <div class="preview">
                <d-button class="preView" (btnClick)="preview()">预览</d-button>
              </div>
              <div class="card2">
                <div class="flow-start">
                  <span>流程开始</span>
                </div>
                <div class="puls-item">
                  <div class="long-arrow"></div>
                  <i (click)="addNode()" class="icon-add-2" title="添加"></i>
                </div>
                <div class="flow-nodes" *ngFor="let node of nodes ; let i = index">
                  <div class="node">
                    <div class="text" *ngIf="i==0">
                      <span>首序</span>
                    </div>
                    <div class="text" *ngIf="i==nodes.length-1&&i!=0">
                      <span>末序</span>
                    </div>
                    <app-process-node (deleteNode)="deleteNode(node)" (click)="editNode(node,i)" [node]="node"
                      [isClicked]="node.isClicked"></app-process-node>
                  </div>
                  <div class="puls-item">
                    <div class="long-arrow"></div>
                    <i class="icon-add-2" title="添加" (click)="addNode(node,i,nodes[i+1])"></i>
                  </div>
                </div>
                <div class="flow-end"><span>流程结束</span> </div>
              </div>
            </div>
            <div class="input-group" *ngIf="display">
              <d-tabs [type]="'tabs'" [(activeTab)]="tabActiveId">
                <d-tab id="工序" title="工序">
                  <div class="input-group-body">
                    <div class="grid mt-3">
                      <div class="u-1-3 me-20">
                        <d-form-item>
                          <d-form-label>
                            <span class="label"><span class="Required">*</span>工序序号</span>
                          </d-form-label>
                          <d-form-control>
                            <d-input-number name="processNumber" class="input-number" [min]="1"
                              [(ngModel)]="this.selectNode.processNumber" (ngModelChange)="processNumberChange()"
                              [dValidateRules]="momFormRules.processNumber"></d-input-number>
                          </d-form-control>
                        </d-form-item>
                      </div>
                      <div class="u-1-3 me-20">
                        <d-form-item>
                          <d-form-label>
                            <span class="label"><span class="Required">*</span>选择工序</span>
                          </d-form-label>
                          <d-form-control>
                            <d-select [options]="processOptions" [filterKey]="'processName'" [valueKey]="'processId'"
                              (valueChange)="selectProcess($event)" name="processId"
                              [(ngModel)]="this.selectNode.processId"></d-select>
                          </d-form-control>
                        </d-form-item>
                      </div>
                      <div class="u-1-3 me-20">
                        <d-form-item>
                          <d-form-label>
                            <span class="label"><span class="Required">*</span>单位工时</span>
                          </d-form-label>
                          <d-form-control>
                            <div class="input-grouppp">
                              <d-input-number [(ngModel)]="this.selectNode.unitTime" name="unitTime"
                              [dValidateRules]="momFormRules.unitTime"></d-input-number>
                              <input type="text" class="danwei" dTextInput [value]="'小时'" [disabled]="true">
                            </div>
                          </d-form-control>
                        </d-form-item>
                      </div>
                      <div class="u-1-3 me-20">
                        <d-form-item>
                          <d-form-label>
                            <span class="label">计件单价</span>
                          </d-form-label>
                          <d-form-control>
                            <div class="input-grouppp">
                              <d-input-number [(ngModel)]="this.selectNode.pieceWage" name="pieceWage" [min]="0" [decimalLimit]="2"
                                [dValidateRules]="momFormRules.pieceWage"></d-input-number>
                              <input type="text" class="danwei" dTextInput [value]="'元/件'" [disabled]="true">
                            </div>
                          </d-form-control>
                        </d-form-item>
                      </div>
                      <div class="u-1-3 me-20">
                        <d-form-item>
                          <d-form-label>
                            <span class="label"><span class="Required"></span>是否委外</span>
                          </d-form-label>
                          <d-form-control>
                            <d-toggle [checked]="false" name="isOutsourcing"
                              [(ngModel)]="selectNode.isOutsourcing"></d-toggle>
                          </d-form-control>
                        </d-form-item>
                      </div>
                      <div class="u-1-3 me-20">
                        <d-form-item>
                          <d-form-label>
                            <span class="label"><span class="Required"></span>是否首检</span>
                          </d-form-label>
                          <d-form-control>
                            <d-toggle [checked]="false" name="first"
                              [(ngModel)]="selectNode.isFirstInspection"></d-toggle>
                          </d-form-control>
                        </d-form-item>
                      </div>
                      <div class="u-1-3 me-20">
                        <d-form-item>
                          <d-form-label>
                            <span class="label"><span class="Required"></span>是否检验</span>
                          </d-form-label>
                          <d-form-control>
                            <d-toggle [checked]="false" name="end" [(ngModel)]="selectNode.isInspection"></d-toggle>
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </div>
                  </div>
                </d-tab>
                <d-tab id="物料" title="物料">
                  <div class="MaterialData">
                    <d-data-table *ngIf="this.display&&this.selectNode.parts.length>0"
                      [dataSource]="this.selectNode.parts" [maxHeight]="maxHeight" [scrollable]="true"
                      [tableWidthConfig]="devuiTableWidthConfig" [fixHeader]="true">
                      <thead dTableHead>
                        <tr dTableRow>
                          <th dHeadCell>&nbsp; </th>
                          <th dHeadCell>物料序号</th>
                          <th dHeadCell>物料编码</th>
                          <th dHeadCell>物料名称</th>
                          <th dHeadCell>物料规格</th>
                          <th dHeadCell>物料单位</th>
                          <th dHeadCell>单位用量</th>
                          <th dHeadCell>损耗率%</th>
                          <th dHeadCell>固定损耗</th>
                        </tr>
                      </thead>
                      <tbody dTableBody>
                        <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                          <tr dTableRow>
                            <td>
                              <span (click)="addMaterial(rowItem,rowIndex,this.selectNode.parts[rowIndex+1])"
                                [title]="'添加物料'"><i class="icon-code-editor-add add ms-3 "></i></span>
                              <span class="ms-3" (click)="removeMaterial(rowIndex,rowItem.partNumber)"
                                [title]="'删除当前物料'"><i class="icon-code-editor-less minus"
                                  style="font-size: 16px;"></i></span>
                            </td>
                            <td dTableCell>
                              <div class="input-box">
                                <input dTextInput type="number" class="devui-input" [(ngModel)]="rowItem.partNumber"
                                  readonly [min]=1 name="partNumber" [ngModelOptions]="{standalone: true}">
                              </div>
                            </td>
                            <td dTableCell>
                              <div class="input-box">
                                <input class="devui-input" dTextInput readonly [ngModelOptions]="{standalone: true}"
                                  [(ngModel)]="rowItem.partNum" [attr.maxlength]="100" [width]="50" [attr.minlength]="3"
                                  (click)="SelectMaterials(rowIndex,rowItem.partNumber) " />
                              </div>
                            </td>
                            <td dTableCell>
                              <div class="input-box">
                                <input class="devui-input" dTextInput readonly [ngModelOptions]="{standalone: true}"
                                  [(ngModel)]="rowItem.partName" [attr.maxlength]="100" [attr.minlength]="3"
                                  (click)="SelectMaterials(rowIndex)" />
                              </div>
                            </td>
                            <td dTableCell>
                              <div class="input-box">
                                <span dTooltip [content]="rowItem?.partType">{{rowItem.partType}}</span>
                              </div>
                            </td>
                            <td dTableCell>
                              <div class="input-box">
                                <span dTooltip [content]="rowItem?.partUOM">{{rowItem.partUOM}}</span>
                              </div>
                            </td>

                            <td dTableCell>
                              <d-input-number [(ngModel)]="rowItem.unitUsage" [min]=0 name="unitUsage"
                                [ngModelOptions]="{standalone: true}"></d-input-number>
                            </td>
                            <td dTableCell>
                              <d-input-number [disabled]="rowItem.lossRateDisabled" [ngModel]="rowItem.lossRate*100"
                                [decimalLimit]="2" [min]=0 [ngModelOptions]="{standalone: true}"
                                (ngModelChange)="lossRateChange($event,rowItem)"></d-input-number>
                            </td>
                            <td dTableCell>
                              <d-input-number [disabled]="rowItem.fixedLossDisabled" [(ngModel)]="rowItem.fixedLoss"
                                [min]=0 [decimalLimit]="3" [ngModelOptions]="{standalone: true}"
                                (ngModelChange)="fixedLossChange($event,rowItem)"></d-input-number>
                            </td>
                          </tr>
                        </ng-template>
                      </tbody>
                    </d-data-table>
                    <div *ngIf="this.display&&this.selectNode.parts.length===0">
                      <d-button (click)="addMaterial()">添加物料</d-button>
                    </div>
                  </div>
                </d-tab>
              </d-tabs>
            </div>
            <div class="input-group" *ngIf="!display">
            </div>
          </div>
        </div>
        <!-- </form> -->
      </div>
    </form>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
